どこでも RUN_JavaScriptBT with_HTML＆CSS-code
code:script.js
// ピっと鳴って ページリロードして 読み込んだスクリプトをリセットする
window.BeepAndReload = function() {
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 880;
oscillator.connect(context.destination);
oscillator.start();
var beepDuration = 50; // Beep音の長さを変数に代入
setTimeout(function () {
oscillator.stop();
// Beep音が鳴り終わった後にリロードを行う
setTimeout(function () {
location.reload(); // ページのリセット
}, beepDuration);
}, beepDuration + 100);
}
// 左上のマークが回転する (RUN.js 実行中を表すため)
window.BMRunningNow = function() {
// CSSの .brand-icon の表示画像を取得
var img = document.querySelector('.brand-icon');
var deg = 0;
setInterval(function() {
img.style.transform = 'rotate(' + deg + 'deg)';
deg = (deg - 6) % 360;
}, 20);
}
// RUN.html RUN.css 読み込み
function loadHTML(htmlurl) {
return new Promise((resolve, reject) => {
fetch(htmlurl)
.then(response => response.text())
.then(data => {
if (!document.documentElement.innerHTML.includes(data)) {
var div = document.createElement('div');
div.innerHTML = data;
document.body.appendChild(div);
}
resolve();
});
});
}
function loadCSS(cssurl) {
return new Promise((resolve, reject) => {
var styleSheets = Array.from(document.styleSheets).map(styleSheet => styleSheet.href);
if (!styleSheets.includes(cssurl)) {
var head = document.getElementsByTagName('HEAD')0; var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = cssurl;
head.appendChild(link);
resolve();
}
});
}
// Runボタン
var clickRunRunBT = 0;
// UserScript でボタンを追加する
scrapbox.PageMenu.addMenu({
title: 'RunButton',
onClick: () => { // ボタン押されたとき
// RUN がすでに動いていたら
if (clickRunRunBT === 1) {
clickRunRunBT = 0;
BeepAndReload(); // 多重起動禁止！ リセットする
} else {
// RUN が動いていない状態で RUN ボタンが押されたら
var RUNcurrentUrl = decodeURIComponent(window.location.href);
// プロジェクト名/ページ名を切り出す
// HTML CSS JavaScript 各 URLにする
// HTML と CSS を読み込む。無くてもエラーにならない。
.then(() => {
// RUN.js を読み取って、スクリプトに追加して間接的に実行する
clickRunRunBT = 1;
BMRunningNow(); // クルクルサイン
// Fetch APIを使用して JavaScriptを取得
fetch(RUNjsurl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
var existingScript = document.querySelector(script[src="${RUNjsurl}"]);
if (!existingScript) {
var elm = document.createElement('script');
elm.setAttribute('src', RUNjsurl);
elm.onload = function() {
this.remove();
};
document.body.appendChild(elm);
}
})
.catch(error => {
alert(`RUN.js にアクセスできません。\n
おそらくこのページに code:RUN.js が書かれていないものと思われます。`);
// RUN.js は必須
BeepAndReload(); // なくってもリセット
});
});
}
}
})
